<template>
	<view class="container">
		<view class="invoice" v-for="(item, index) in tables" :key="index">
			<view class="invoice_left">
				<image src="/static/image/invoice/invoice.png" mode=""></image>
				<view class="invoice_vip">
					<view class="vips">
						会员费发票
					</view>
					<view class="times">
						{{ item.createTime }}
					</view>
				</view>
			</view>
			<view class="invoice_right" @click="picDown(index)">
				点击下载
			</view>
		</view>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js";

	export default {
		data() {
			return {
				tables: [], // 初始化为空数组  
				token: '',
			};
		},
		onLoad(options) {
			this.token = wx.getStorageSync('token');
			this.download();
		},
		methods: {
			download() {
				$http.request({
					header: {
						Authorization: this.token,
					},
					url: '/storeuser/my/downloadTicket',
					method: "POST",
				}).then((res) => {
					console.log(res, "发票下载");
					this.tables = res
				})
			},

			picDown(index) {
				console.log(this.tables[index].path);
				
				const imageUrl = this.tables[index].path
				
				uni.authorize({
					scope:'scope.writePhotosAlbum',
					success: () => {
						console.log(1111);
						uni.downloadFile({
							url:`http://192.168.1.9:8000${imageUrl}`,
							success: (downloadRes) => {
								console.log(downloadRes,"下载成功");
								
								uni.saveImageToPhotosAlbum({
									filePath:downloadRes.tempFilePath,
									success:()=>{
										uni.showToast({
											title:"图片已保存到相册"
										})
									},
									fail:(err)=>{
										console.log("保存图片到相册失败",err);
										uni.showToast({
											title:"保存失败"
										})
									}
								})
							}
						})
					}
				})
				
			}
		}
	};
</script>

<style scoped lang="scss">
	@import '@/common/sass/all/all.scss';

	.invoice {
		width: 678rpx;
		height: 141rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 11rpx;

		.invoice_left {
			width: 328rpx;
			display: flex;
			justify-content: space-around;

			image {
				width: 71rpx;
				height: 88rpx;
				margin-left: -30rpx;
			}

			.invoice_vip {
				.vips {
					font-size: 28rpx;
					font-weight: 400;
					color: #3E3A39;
				}

				.times {
					font-size: 20rpx;
					font-weight: 400;
					color: #7D7D7D;
					margin-top: 16rpx;
				}
			}
		}

		.invoice_right {
			width: 127rpx;
			height: 44rpx;
			line-height: 44rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: #FFFFFF;
			border-radius: 35rpx;
			text-align: center;
			background: linear-gradient(to bottom right, RGBA(19, 182, 163, 1), RGBA(1, 131, 141, 1));
		}
	}
</style>